//
// Buttons
// --------------------------------------------------


.sm-btn {
    width: 50px;
    padding: 5px 10px;
}

.md-btn {
    width: 100px;
    padding: 5px 10px;
}

.lg-btn {
    width: 150px;
    padding: 5px 10px;
}


/*********************************************************************

	Name:		Push - Bootstrap Button Pack
	Author:		BootstrapBay - (http://www.bootstrapbay.com/)
	Version:	1.0
	
*********************************************************************/

/******************************************************
	CUSTOM BTN VALUES
******************************************************/

.btn {
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

/******************************************************
	STANDARD BUTTONS
******************************************************/

.btn-default {
    border: 1px solid #C4C4C4;
    color: #737373;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background: #FFFFFF;
    border-color: #949494;
    color: #737373;
}

.btn-default:active, .btn-default.active {
    border-color: #737373;
    box-shadow: none;
}

.btn-primary {
    background: #0099cc;
    color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;
}

.btn-primary:active, .btn-primary.active {
    background: #007299;
    box-shadow: none;
}

.btn-success {
    background: #00bf6f;
    color: #ffffff;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background: #39bf87;
}

.btn-success:active, .btn-success.active {
    background: #008c52;
    box-shadow: none;
}

.btn-info {
    background: #31cde8;
    color: #ffffff;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
    background: #5fd4e8;
}

.btn-info:active, .btn-info.active {
    background: #35a2b5;
    box-shadow: none;
}

.btn-warning {
    background: #eb8f34;
    color: #ffffff;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    background: #eba259;
}

.btn-warning:active, .btn-warning.active {
    background: #b87430;
    box-shadow: none;
}

.btn-danger {
    background: #f25454;
    color: #ffffff;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background: #f26d6d;
}

.btn-danger:active, .btn-danger.active {
    background: #bf4343;
    box-shadow: none;
}

/******************************************************
	SHARP BUTTONS
******************************************************/

.btn.sharp {
    border-radius: 0;
}

/******************************************************
	OUTLINE BUTTONS
******************************************************/
.btn.outline {
    background: none;
    padding: 12px 22px;
}

.btn-primary.outline {
    border: 2px solid #0099cc;
    color: #0099cc;
}

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #33a6cc;
    border-color: #33a6cc;
}

.btn-primary.outline:active, .btn-primary.outline.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

.btn-success.outline {
    border: 2px solid #00bf6f;
    color: #00bf6f;
}

.btn-success.outline:hover, .btn-success.outline:focus, .btn-success.outline:active, .btn-success.outline.active, .open > .dropdown-toggle.btn-success {
    border-color: #39bf87;
    color: #39bf87;
}

.btn-success.outline:active, .btn-success.outline.active {
    border-color: #008c52;
    color: #008c52;
    box-shadow: none;
}

.btn-info.outline {
    border: 2px solid #31cde8;
    color: #31cde8;
}

.btn-info.outline:hover, .btn-info.outline:focus, .btn-info.outline:active, .btn-info.outline.active, .open > .dropdown-toggle.btn-info {
    border-color: #5fd4e8;
    color: #5fd4e8;
}

.btn-info.outline:active, .btn-info.outline.active {
    border-color: #35a2b5;
    color: #35a2b5;
    box-shadow: none;
}

.btn-warning.outline {
    border: 2px solid #eb8f34;
    color: #eb8f34;
}

.btn-warning.outline:hover, .btn-warning.outline:focus, .btn-warning.outline:active, .btn-warning.outline.active, .open > .dropdown-toggle.btn-warning {
    border-color: #eba259;
    color: #eba259;
}

.btn-warning.outline:active, .btn-warning.outline.active {
    border-color: #b87430;
    color: #b87430;
    box-shadow: none;
}

.btn-danger.outline {
    border: 2px solid #f25454;
    color: #f25454;
}

.btn-danger.outline:hover, .btn-danger.outline:focus, .btn-danger.outline:active, .btn-danger.outline.active, .open > .dropdown-toggle.btn-danger {
    border-color: #f26d6d;
    color: #f26d6d;
}

.btn-danger.outline:active, .btn-danger.outline.active {
    border-color: #bf4343;
    color: #bf4343;
    box-shadow: none;
}

/******************************************************
	GRADIENT BUTTONS
******************************************************/
.btn-primary.gradient {
    background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* IE10+ */
    background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
    background: -moz-linear-gradient(top, #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* IE10+ */
    background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}

.btn-primary.gradient:active, .btn-primary.gradient.active {
    background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #267c99 50%,#007299 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); /* IE10+ */
    background: linear-gradient(to bottom, #267c99 50%,#007299 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}

.btn-success.gradient {
    background: -moz-linear-gradient(top, #99bf67 50%, #80cf4f 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#99bf67), color-stop(50%,#80cf4f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #99bf67 50%,#80cf4f 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #99bf67 50%,#80cf4f 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #99bf67 50%,#80cf4f 50%); /* IE10+ */
    background: linear-gradient(to bottom, #99bf67 50%,#80cf4f 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99bf67', endColorstr='#60bf6f',GradientType=0 ); /* IE6-9 */
}

.btn-success.gradient:hover, .btn-success.gradient:focus, .btn-success.gradient:active, .btn-success.gradient.active, .open > .dropdown-toggle.btn-success {
    background: -moz-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#73bf9f), color-stop(50%,#39bf87)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* IE10+ */
    background: linear-gradient(to bottom, #73bf9f 50%,#39bf87 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73bf9f', endColorstr='#39bf87',GradientType=0 ); /* IE6-9 */
}

.btn-success.gradient:active, .btn-success.gradient.active {
    background: -moz-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2a8c63), color-stop(50%,#008c52)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* IE10+ */
    background: linear-gradient(to bottom, #2a8c63 50%,#008c52 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a8c63', endColorstr='#008c52',GradientType=0 ); /* IE6-9 */
}

.btn-info.gradient {
    background: -moz-linear-gradient(top, #5fd4e8 50%, #31cde8 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#5fd4e8), color-stop(50%,#31cde8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* IE10+ */
    background: linear-gradient(to bottom, #5fd4e8 50%,#31cde8 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fd4e8', endColorstr='#31cde8',GradientType=0 ); /* IE6-9 */
}

.btn-info.gradient:hover, .btn-info.gradient:focus, .btn-info.gradient:active, .btn-info.gradient.active, .open > .dropdown-toggle.btn-info {
    background: -moz-linear-gradient(top, #8edae8 50%, #5fd4e8 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#8edae8), color-stop(50%,#5fd4e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* IE10+ */
    background: linear-gradient(to bottom, #8edae8 50%,#5fd4e8 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8edae8', endColorstr='#5fd4e8',GradientType=0 ); /* IE6-9 */
}

.btn-info.gradient:active, .btn-info.gradient.active {
    background: -moz-linear-gradient(top, #6baab5 50%, #35a2b5 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#6baab5), color-stop(50%,#35a2b5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* IE10+ */
    background: linear-gradient(to bottom, #6baab5 50%,#35a2b5 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6baab5', endColorstr='#35a2b5',GradientType=0 ); /* IE6-9 */
}

.btn-warning.gradient {
    background: -moz-linear-gradient(top, #eba259 50%, #eb8f34 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#eba259), color-stop(50%,#eb8f34)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* IE10+ */
    background: linear-gradient(to bottom, #eba259 50%,#eb8f34 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba259', endColorstr='#eb8f34',GradientType=0 ); /* IE6-9 */
}

.btn-warning.gradient:hover, .btn-warning.gradient:focus, .btn-warning.gradient:active, .btn-warning.gradient.active, .open > .dropdown-toggle.btn-warning {
    background: -moz-linear-gradient(top, #ebb57f 50%, #eba259 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ebb57f), color-stop(50%,#eba259)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* IE10+ */
    background: linear-gradient(to bottom, #ebb57f 50%,#eba259 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebb57f', endColorstr='#eba259',GradientType=0 ); /* IE6-9 */
}

.btn-warning.gradient:active, .btn-warning.gradient.active {
    background: -moz-linear-gradient(top, #b8824d 50%, #b87430 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#b8824d), color-stop(50%,#b87430)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b8824d 50%,#b87430 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b8824d 50%,#b87430 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b8824d 50%,#b87430 50%); /* IE10+ */
    background: linear-gradient(to bottom, #b8824d 50%,#b87430 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8824d', endColorstr='#b87430',GradientType=0 ); /* IE6-9 */
}

.btn-danger.gradient {
    background: -moz-linear-gradient(top, #f26d6d 50%, #f25454 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f26d6d), color-stop(50%,#f25454)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* IE10+ */
    background: linear-gradient(to bottom, #f26d6d 50%,#f25454 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f26d6d', endColorstr='#f25454',GradientType=0 ); /* IE6-9 */
}

.btn-danger.gradient:hover, .btn-danger.gradient:focus, .btn-danger.gradient:active, .btn-danger.gradient.active, .open > .dropdown-toggle.btn-danger {
    background: -moz-linear-gradient(top, #f28585 50%, #f26d6d 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f28585), color-stop(50%,#f26d6d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* IE10+ */
    background: linear-gradient(to bottom, #f28585 50%,#f26d6d 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28585', endColorstr='#f26d6d',GradientType=0 ); /* IE6-9 */
}

.btn-danger.gradient:active, .btn-danger.gradient.active {
    background: -moz-linear-gradient(top, #bf5656 50%, #bf4343 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#bf5656), color-stop(50%,#bf4343)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* IE10+ */
    background: linear-gradient(to bottom, #bf5656 50%,#bf4343 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5656', endColorstr='#bf4343',GradientType=0 ); /* IE6-9 */
}

/******************************************************
	ROUNDED BUTTONS
******************************************************/

.btn.round {
    border-radius: 24px;
}

.btn-lg.round {
    border-radius: 32px;
}

.btn-sm.round {
    border-radius: 14px;
}

.btn-xs.round {
    border-radius: 10px;
}

/******************************************************
	RAISED BUTTONS
******************************************************/

.btn-primary.raised {
    box-shadow: 0 3px 0 0 #007299;
}

.btn-primary.raised:active, .btn-primary.raised.active {
    background: #33a6cc;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

.btn-success.raised {
    box-shadow: 0 3px 0 0 #008c52;
}

.btn-success.raised:active, .btn-success.raised.active {
    background: #39bf87;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

.btn-info.raised {
    box-shadow: 0 3px 0 0 #35a2b5;
}

.btn-info.raised:active, .btn-info.raised.active {
    background: #5fd4e8;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

.btn-warning.raised {
    box-shadow: 0 3px 0 0 #b87430;
}

.btn-warning.raised:active, .btn-warning.raised.active {
    background: #eba259;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

.btn-danger.raised {
    box-shadow: 0 3px 0 0 #bf4343;
}

.btn-danger.raised:active, .btn-danger.raised.active {
    background: #f26d6d;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}

/*============== mixin ==============*/

@mixin btn-contian($bg1, $bg2, $cl, $bgHover1, $bgHover2, $clHover, $bgSelect1, $bgSelect2, $clSelect) {
    background-color: #{$bg1} !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$bg1}", endColorstr="#{$bg2}");
    background-image: linear-gradient(#{$bg1}, #{$bg2});
    background-image: -moz-linear-gradient(top, #{$bg1}, #{$bg2});
    background-image: -ms-linear-gradient(top, #{$bg1}, #{$bg2});
    background-image: -o-linear-gradient(top, #{$bg1}, #{$bg2});
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #{$bg1}), color-stop(50%, #{$bg2}));
    background-image: -webkit-linear-gradient(10, #{$bg1}, #{$bg2}); // top
    color: $cl;

    &:hover {
        background-color: #{$bgHover1} !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$bgHover1}", endColorstr="#{$bgHover2}");
        background-image: -moz-linear-gradient(top, #{$bgHover1}, #{$bgHover2});
        background-image: -ms-linear-gradient(top, #{$bgHover1}, #{$bgHover2});
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #{$bgHover1}), color-stop(100%, #{$bgHover2}));
        background-image: -webkit-linear-gradient(top, #{$bgHover1}, #{$bgHover2});
        background-image: -o-linear-gradient(top, #{$bgHover1}, #{$bgHover2});
        background-image: linear-gradient(#{$bgHover1}, #{$bgHover2});
        color: $clHover;
    }

    &:focus {
        color: $cl;
    }

    &.selected {
        background-color: #{$bgSelect1} !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$bgSelect1}", endColorstr="#{$bgSelect2}");
        background-image: -moz-linear-gradient(top, #{$bgSelect1}, #{$bgSelect2});
        background-image: -ms-linear-gradient(top, #{$bgSelect1}, #{$bgSelect2});
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #{$bgSelect1}), color-stop(100%, #{$bgSelect2}));
        background-image: -webkit-linear-gradient(top, #{$bgSelect1}, #{$bgSelect2});
        background-image: -o-linear-gradient(top, #{$bgSelect1}, #{$bgSelect2});
        background-image: linear-gradient(#{$bgSelect1}, #{$bgSelect2});
        color: $clSelect;

        &:hover {
            color: $clHover;
        }
    }
}


